import React, { useState } from 'react';
import { Card, List, Tag, Button, Pagination, Space, Tooltip, Select } from 'antd';
import { StarOutlined, ShareAltOutlined, EyeOutlined } from '@ant-design/icons';

const { Option } = Select;

const results = [
  {
    id: 1,
    title: 'AI大模型最新突破，行业影响深远',
    summary: 'OpenAI发布新一代大模型，推动AI应用加速落地...',
    tags: ['AI', '大模型', 'OpenAI'],
    collected: false
  },
  {
    id: 2,
    title: 'AI监管政策解读与趋势分析',
    summary: '全球主要经济体纷纷出台AI监管政策，影响深远...',
    tags: ['政策', '监管', '趋势'],
    collected: true
  },
  {
    id: 3,
    title: 'AI赋能医疗健康，创新应用案例',
    summary: 'AI在医学影像、辅助诊断等领域持续创新...',
    tags: ['医疗', 'AI应用'],
    collected: false
  }
];

const SearchResult: React.FC = () => {
  const [page, setPage] = useState(1);
  const [sort, setSort] = useState('relevance');
  return (
    <Card
      title={
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <span style={{ fontWeight: 600, fontSize: 18 }}>搜索结果</span>
          <Select value={sort} style={{ width: 120 }} onChange={setSort}>
            <Option value="relevance">相关度排序</Option>
            <Option value="time">最新优先</Option>
          </Select>
        </div>
      }
      bordered={false}
      style={{ background: '#fff', borderRadius: 16 }}
    >
      <List
        itemLayout="vertical"
        dataSource={results}
        renderItem={item => (
          <List.Item style={{ marginBottom: 16 }}>
            <Card
              style={{ borderRadius: 12, background: '#f6faff' }}
              title={<span style={{ fontWeight: 600 }}>{item.title}</span>}
              actions={[
                <Tooltip title={item.collected ? '已收藏' : '收藏'}>
                  <Button type={item.collected ? 'primary' : 'default'} shape="circle" icon={<StarOutlined />} />
                </Tooltip>,
                <Tooltip title="分享">
                  <Button shape="circle" icon={<ShareAltOutlined />} />
                </Tooltip>,
                <Tooltip title="查看详情">
                  <Button shape="circle" icon={<EyeOutlined />} />
                </Tooltip>
              ]}
            >
              <div style={{ color: '#555', marginBottom: 8 }}>{item.summary}</div>
              <div>
                {item.tags.map(tag => <Tag key={tag} color="blue">{tag}</Tag>)}
              </div>
            </Card>
          </List.Item>
        )}
      />
      <div style={{ textAlign: 'right', marginTop: 16 }}>
        <Pagination current={page} total={30} pageSize={5} onChange={setPage} showSizeChanger={false} />
      </div>
    </Card>
  );
};

export default SearchResult; 